<template>
  <div id="app">
    <transition :name="transitionName"> 
      <router-view style="width:100%;" />
    </transition>
  </div>
</template>
<script>
import {
    bus
} from './bus.js'
export default {
  data() {
    return {
      transitionName:''
    }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //优化滚动条到底部，切换页面的时候出现白板的问题
      document.documentElement.scrollTop = 0;
      let index = this.$store.state.routerChange.indexOf(to.name)
      if( index !=-1){
        this.transitionName = 'slide-right';
        let arr = this.removeData(index+1)
        this.$store.commit('setRouterChange', arr);
        return
      }else{
        this.transitionName = 'slide-left';
      }
      this.$store.commit('pushRouterChange', to.name);
    }
  },
  mounted(){
    
  },
  methods: {
    removeData(index){
       let arr = this.$store.state.routerChange 
       let newArr = []
       for(let i = 0;i<arr.length;i++){
         if(i != index){
           newArr.push(arr[i])
         }
       }
       return newArr
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: transparent;
}
*{
  -webkit-touch-callout:none; 
  -webkit-user-select:none; 
  -khtml-user-select:none; 
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;
}
.van-field__control:disabled {
    color: #333333;
    cursor: not-allowed;
    opacity: 1;
    -webkit-text-fill-color: #414142;
}
input,textarea {
  -webkit-user-select:auto; /*webkit浏览器*/
  user-select:auto;
  margin: 0px;
  padding: 0px;
  outline: none;
}
.van-nav-bar{
  background-color:#3B3D4E;
}
.van-nav-bar .van-icon,.van-nav-bar__text,.van-nav-bar__title{
  color:#fff;
}
.van-hairline--bottom::after {
  border: none;
}
.sel{
  height: 30px;
  line-height: 30px;
  padding: 0 20px 0 10px;
  font-size: 14px;
  border: 1px solid #B6B6B8;
  border-radius: 15px;
  background: url("assets/xl.png") no-repeat right 5px top 12px;
  margin-left: 10px;
}
.btnBox{
  margin:0 auto;
  width: 100%;
  padding: 20px 60px;
  box-sizing: border-box;
}
.required::after{
  content: "*";
  color: #F76734;
}
.marginTop15{
  margin-top: 15px;
  text-align: left;
}
.setbtn{
  min-width: 60px;
}
.factorBtnBox{
  width: 100%;
  height: 40px;
  background: #fff;
  padding:10px 0;
}
.pltxt{
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding-left: 12px;
  color: #616161;
}
.settings{
  .van-field__label{
    width: auto;
  }
}
.slide-bottom-enter-active,
.slide-bottom-leave-active,
.slide-top-enter-active,
.slide-top-leave-active,
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: transform 500ms;
  position: absolute;
  top: 0;
  left: 0;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-top-enter {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.slide-top-leave-active {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
.slide-bottom-enter {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}
.slide-bottom-leave-active {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}
.idle{
  color: #B9B9B9;
}
.connect{
  color: #2FBDF1;
}
.charging{
  color: #08BC34;
}
.Done{
  color: #F27915;
}
.Fault{
  color: #EA2C39;
}
</style>